<template>
  <div id="choose_bank">
    <c-title :hide="false" text="选择银行卡"></c-title>
    <div class="bank-main">
      <div class="bank-list">
        <block  v-for="(item,index) in bank" :key="index"   >
          <div class="bank-item flex" :class="getIconUrl(item)"   @click.stop="toPay(item)">
            <block v-for="(iconItem,iconIndex) in iconList" :key="iconIndex"  >
            <template v-if="item.bank_name== iconItem.bank_name">
              <img :src="`${imgPath}converge_pay/${iconItem.icon_cn_name_bg}`"  class="bank-bg" />
              <div class="bank-img" >
                <div class="bank-circle flex-a-c flex-j-c">
                  <img :src="`${imgPath}converge_pay/${iconItem.icon_cn_name}`"   />
                </div>
              </div>
            </template>
          </block>
            <div class="bank-wrap">
              <div class="bank-title flex-j-sb flex-a-c">
                <h3>{{item.bank_name}}</h3>
                <p @click.stop="tapUnbound(item)">解绑</p>
              </div>
              <div class="store-text">{{item.bank_type_name}}</div>
              <div class="bank-num">{{changeBank(item.card_no)}}</div>
            </div>
          </div>
        </block>
        <div class="bank-btn">
          <div class="add flex-a-c flex-j-c" @click="toAdd">
            <div class="add-icon"></div>
            <span>添加银行卡</span>
          </div>
        </div>
      </div>
    </div>
  <div class="mb-50"></div>
  <van-popup v-model="show1" position="bottom" round :style="{ width: '100%', height: '55%' }">
    <div class="pay-mian">
      <div class="title">
        <p>付款详情</p>
        <i class="iconfont icon-close11 bank-close" @click="show1 = false"></i>
      </div>
      <div class="pay-info">
        <div class="pay-info-item flex-a-c flex-j-sb">
          <div class="info-name">支付金额</div>
          <div class="price">{{ $i18n.t('money') }}{{ amount }}</div>
        </div>
        <div class="pay-info-item flex-a-c flex-j-sb">
          <div class="info-name">支付流水号</div>
          <div class="info-val">{{ pay_sn }}</div>
        </div>
        <div class="pay-info-item flex-a-c flex-j-sb">
          <div class="info-name">付款方式</div>
          <div class="info-val">{{ bank_name }}</div>
        </div>
      </div>
      <div class="pay-code flex">
        <input type="text"  v-model="code" placeholder="请输入验证码"/>
        <div class="bank-name" @click.stop="verificationCode" v-if="!btnTag">{{btnText}}</div>
        <div class="bank-color" v-else>{{btnText}}</div>
      </div>
      <div class="hint" v-if="start1">已向手机{{ payer_phone.substr(0, 3) + '****' + payer_phone.substr(7) }}发送短信</div>
      <div class="mb-64"></div>
      <div class="pay-btn" :style="iPnoneBottomBol ? 'bottom: 40px;' : ''">
        <van-button type="primary" style="width:100%;border-radius: 30px;" color="var(--themeBaseColor)" @click="pay" >支付</van-button>
      </div>
    </div>
  </van-popup>
  </div>
</template>
<script>
import choose_bank_controller from './choose_bank_controller';
export default choose_bank_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.mb-50 {
  height: 3.125rem;
  clear: both;
}
.mb-64 {
  height: 4rem;
  clear: both;
}

#choose_bank {
  position: relative;
  height: 100vh;
  .bank-main {
    .bank-list {
      margin:0.75rem 0.75rem 0 0.75rem;
      .bank-item {
        box-shadow: inset 0rem 0 0.3125rem 0.0625rem rgba(255,255,255,0.8);
        border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
        padding:0.875rem;
        margin:0 0 0.875rem 0;
        position: relative;
        .bank-bg {
          position: absolute;
          bottom:0;
          right:0.625rem;
          display: block;
          
        }
        .bank-img {
          padding:0 0.375rem 0 0;
          .bank-circle {
            width: 2.5rem;
            height: 2.5rem;
            background: #FFFFFF;
            border-radius: 50%;
            img {
              width:2.25rem;
              display: block;
              height: auto;
            }
          }
        }
        .bank-wrap {
          flex:1;
          .bank-title {
            color: #FFFFFF;
            h3 {
              font-size: 1rem;
              
            }
            p {
              font-size: 0.8125rem;
            }
          }
          .store-text {
            font-size: 0.8125rem;
            color: #FFFFFF;
            text-align: left;
            padding:0.1875rem 0 0 0;
          }
          .bank-num {
            font-weight: 500;
            font-size: 1.125rem;
            color: #FFFFFF;
            text-align: left;
            padding:1.625rem 0 0.625rem 0;
          }
        }
      }
      .bank-btn {
        background: #FFFFFF;
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        padding:1.125rem 0;
        .add {
          font-weight: 500;
          font-size: 0.875rem;
          color: #3B3B4A;
          .add-icon {
            width: 0.75rem;
            height: 0.75rem;
            position: relative;
            
            &::after {
              content:'';
              width: 0.75rem;
              height: 0.125rem;
              background: #AAAAB3;
              border-radius: 0.1875rem 0.1875rem 0.1875rem 0.1875rem;
              position: absolute;
              left:0;
              top:50%;
              transform: translate(0,-50%);
            }
            &::before {
              content:'';
              width: 0.125rem;
              height: 0.75rem;
              position: absolute;
              background: #AAAAB3;
              border-radius: 0.1875rem 0.1875rem 0.1875rem 0.1875rem;
              left:50%;
              top:50%;
              transform: translate(-50%,-50%);
            }
          }
          span {
            padding:0 0 0 0.3125rem;
          }
        }
      }
    }
  }
  .pay-mian {
    background: #F5F5F5;
    height: 100%;
    .title {
      position: relative;
      padding:1.125rem 0 1.25rem 0;
      p {
        font-weight: bold;
        font-size: 1rem;
        color: #00001C;
      }
      .bank-close {
        display: flex;
        color: #AAAAB3;
        padding:0 1.125rem 0 0;
        position: absolute;
        right: 0;
        top:50%;
        transform: translate(0%,-50%);
      }
    }
    .pay-info {
      background: #FFFFFF;
      margin:0 0.75rem 0.625rem 0.75rem;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      padding:1.5rem 0.625rem 0 0.625rem;
      .pay-info-item {
        padding:0 0 1.375rem 0;
        .info-name {
          font-weight: 500;
          font-size: 0.875rem;
          color: #00001C;
        }
        .price {
          font-weight: 500;
          font-size: 0.875rem;
          color: #F15353;
        }
        .info-val {
          font-size: 0.875rem;
          color: #00001C;
        }
      }
    }
    .pay-code {
      background: #FFFFFF;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      margin:0 0.75rem 0.625rem 0.75rem;
      padding:1.125rem 0.625rem;
      input {
        border: none;
        outline: none;
        flex: 1;
        // margin-left: 12px;
        font-size: 0.875rem;
        ::placeholder {
          color: #D6D6DC;
        }

      }
      .bank-name {
        font-size: 0.875rem;
        color: var(--themeBaseColor);
      }
      .bank-color {
        color:#AAAAB3;
      }
    }
    .hint {
      font-weight: 400;
      font-size: 0.75rem;
      color: #AAAAB3;
      
    }
    .pay-btn {
      width:100%;
      padding:0.625rem 0.75rem;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0rem 0 0.3125rem 0.0625rem #F5F5F5;
      border-radius: 0rem 0rem 0rem 0rem;
      margin:1.25rem 0 0 0;
      position: fixed;
      bottom: 0;
      left:0;
      
    }
  }
}
#choose_bank .bank-main .bank-list .bank-item  .bank-bg{
  width: 7.1875rem;
  // height: 7.1875rem;
  bottom: 0rem;
}
.zhongxin,.gongshang,.zhongguo,.beijing,.zhaoshang,.guangfa {
  background: linear-gradient(#F6454A  0%, #FB6F61 100%);
  box-shadow: inset 0rem 0 0.3125rem 0.0625rem rgba(255,255,255,0.8);
  
}


.shanghai,.jianshe,.mingsheng,.jiaotong,.pufa {
  background: linear-gradient(#3567DC 0%, #5C8FE5 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.guangda {
  background: linear-gradient(#8147F9 0%, #977FF9 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.pingan {
  background: linear-gradient(#F97330 0%, #FF925A 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.youzheng {
  background: linear-gradient(#06A484 0%, #45BEA3 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.default {
  background-color: #ccc;
}
</style>
